<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Short Url</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap-3.3.7/css/bootstrap.css}">
<script type="text/javascript" th:src="@{bootstrap-3.3.7/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap-3.3.7/js/bootstrap.js}"></script>
<body>
<h1 class="col-lg-offset-6 text-info">短连接生成</h1>
<form role="form" th:id="submitForm" th:action="@{/get_long_uri}" method="post">
    <div class="container form-group">
        <label class="col-lg-offset-6" for="longUri">长连接</label>
        <textarea id="longUri" name="longUri" class="form-control col-lg-offset-1 col-lg-8" rows="3"></textarea>
    </div>
    <div class="container">
        <button class="btn-success col-lg-offset-1" th:type="button"
                th:onclick="'javascript:jsonRequest(\'submitForm\')'">生成短连接
        </button>
    </div>
    <div class="container form-group">
        <label class="col-lg-offset-6" for="shortUri">短连接</label>
        <textarea id="shortUri" name="shortUri" class="form-control col-lg-offset-1 col-lg-8" rows="3"></textarea>
    </div>

</form>
</body>
<script th:inline="javascript">
    /*<![CDATA[*/
    ctxPath = /*[[@{/}]]*/ '';
    /*]]>*/
    $(function () {
        $.fn.serializeJsonObject = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        }
    });

    function jsonRequest(formId) {
        let data = $("#" + formId).serializeJsonObject()
        $.ajax({
            url: ctxPath+"/get_long_uri",
            contentType: 'application/json',
            method: "post",
            data: JSON.stringify(data),
            success: function (data) {
                $("#shortUri").val(data.message)
            }

        })
    }
</script>

</html>